<template>
    <div id="LISTData">
        <router-link :to="{ name:'result',params:{title:LISTData!= '' ?  LISTData.name: null,id:LISTData!= '' ? LISTData.id:null,name:$route.name}}">
         <li :show="LISTData.isHaveVideo">
             <div class="img" :style= "'background-image: url('+ LISTData.image +')'"></div>
             <div class="vicon">
                  <i :style= "'background-image: url('+$qiniu.url+'assets/img/newjianshen.png)'" v-if="LISTData.isHaveVideo"></i>
             </div>
             <div class="desc">
                  <h3>{{ LISTData.name }}</h3>
                  燃脂: {{ LISTData.kcal.toFixed(1) }}千卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时间: {{ (LISTData.time > 60 ? parseInt(LISTData.time/60)+'分钟' : parseInt(LISTData.time)+'秒')}}   
             </div>
         </li>
         </router-link>
    </div>
</template>
<script>
    export default {
        props: ["LISTData"],
        methods: {

        }
    }
</script>
<style scoped>
    li {
        width: 100%;
        height: 100px;
        padding: 20px 0;
        /*background-color: #def;*/
        box-sizing: border-box;
        border-top: 1px solid rgba(253, 184, 1, .5);
    }
    
    li .img {
        width: 25%;
        height: 60px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        float: left;
    }
    
    li .desc {
        height: 60px;
        box-sizing: border-box;
        /*text-indent: 10px;*/
        /*background-color: #011010;*/
        margin-left: 25%;
        margin-right: 14%;
        padding-left: 10px;
        box-sizing: border-box;
        font-size: 13px;
        line-height: 30px;
        color: #fff;
    }
    
    li .desc h3 {
        font-size: 16px;
    }
    
    li .vicon {
        width: 15%;
        height: 60px;
        /*background-color: pink;*/
        float: right;
        position: relative;
    }
    
    li .vicon i {
        width: 30px;
        height: 30px;
        position: absolute;
        left: 0;
        top: 0;
        right: 50%;
        bottom: 0;
        margin: auto;
        background-position: -85px -2px;
        background-repeat: no-repeat;
        background-size: 300px 35px;
    }
</style>